<template>
	<!-- 修改蓝宝石膨胀状态弹框  -->
	<uni-popup ref="popup" type="center" style="z-index: 910" :is-mask-click="false">
		<view class="package" style="width:650rpx;padding:30rpx;">
			<view style="text-align: center;">修改蓝宝石膨胀状态</view>
			<view class="space-between but">
				<view @click="recoveryOpen()">回收</view>
				<view @click="grantOpen()">发放</view>
			</view>
		</view>
	</uni-popup>
	<!-- 回收弹框 -->
	<uni-popup ref="recovery" type="center" style="z-index: 910" :is-mask-click="false">
		<view class="package" style="width:650rpx;padding:30rpx;">
			<view class="space-between">
				<view>本次应回收</view>
				<input class="uni-input" :value="recovers?recovers:orderLists.gem" @input="onChineseInput" />
			</view>
			<view class="space-between top">
				<view>车友蓝宝石余额</view>
				<view>{{orderLists.driver_gem}}</view>
			</view>
			<view class="space-between top">
				<view>本次实际回收蓝宝石</view>
				<view>{{reality}}</view>
			</view>
			<view class="top">
				<view>回收理由</view>
				<textarea class="textarea" v-model="value"></textarea>
			</view>
			<view class="space-between but">
				<view @click="recoveryClose()">取消</view>
				<view @click="recovered()">回收</view>
			</view>
		</view>
	</uni-popup>
	<!-- 发放弹框 -->
	<uni-popup ref="grant" type="center" style="z-index: 910" :is-mask-click="false">
		<view class="package" style="width:650rpx;padding:30rpx;">
			<view class="space-between" @click="openPlatePicker()">
				<view>车牌号</view>
				<view>{{numberplate?numberplate:orderLists.cart_code}}</view>
			</view>
			<view class="space-between top">
				<view>手机号</view>
				<input class="uni-input" maxlength="11" :value="phone?phone:orderLists.driver_mobile" v-model="phone" />
			</view>
			<view class="top">
				<view>照片</view>
				<mk-upload :imgList="imgList" @onDelete="onDelete" @onChoose="onChoose" :maxCount="1" />
			</view>
			<view class="space-between but">
				<view @click="grantClose()">取消</view>
				<view @click="submit()">发放</view>
			</view>
		</view>
	</uni-popup>
	<!-- 车牌弹框 -->
	<VehiclePlatePad v-if="isShowPlatePad" @cancel="isShowPlatePad = false" @confirm="confirmPlate" />
	<!-- 图片加水印 -->
	<Watermark ref="watermark" @selected="selected"></Watermark>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import Watermark from '@c/watermark.vue';
	import { errorToast, showLoading, successToast } from '@/utils/prompt';
	import { toPublish } from '@mqtt';
	import VehiclePlatePad from '@c/earthPushing/common/VehiclePlatePads.vue';
	import { getDriverID } from '@/stores/driverID';
	const admin_id = getDriverID();
	const props = defineProps({
		orderID: { type: Number },
		orderLists: { type: Object },
	});
	const emit = defineEmits(['submit']);
	const popup = ref(null)
	const recovery = ref(null)
	const grant = ref(null)
	const value = ref(null)
	const phone = ref()
	const recovers = ref()
	const reality = ref()
	const isShowPlatePad = ref(false); //添加车牌弹框
	const numberplate = ref(''); //车牌号
	// 上传图片
	const imgList = ref([])
	const image = ref()
	const watermark = ref(null)
	if (props.orderLists && props.orderLists.cart_image) {
		imgList.value.push(props.orderLists.cart_image)
	}
	// 上传图片
	function onChoose(e : any) {
		watermark.value.fillTextToImg(e.tempFilePaths[0])
		console.log(e.tempFilePaths[0])
	}
	function selected(e : any) {
		uni.uploadFile({
			url: 'https://admin.anlan.tech/api/common/upload2',
			filePath: e,
			name: 'file',
			formData: {
				'user': 'test'  // 上传附带参数
			},
			success: (uploadFileRes) => {
				// 根据接口具体返回格式   赋值具体对应url
				imgList.value.push(JSON.parse(uploadFileRes.data).data.fullurl)
				image.value = JSON.parse(uploadFileRes.data).data.url
			},
			fail: (err : any) => {
				console.log('err', err)
			}
		});
	}
	// 删除图片
	function onDelete() {
		imgList.value = []
		image.value = ''
	}
	/**
	  * 打开/关闭车牌弹框
	  */
	function openPlatePicker() {
		isShowPlatePad.value = true
	}

	//新增车牌
	function confirmPlate(plate : string) {
		numberplate.value = plate;
		isShowPlatePad.value = false;
	}
	//提交发放
	function submit() {
		if (!props.orderLists.cart_code && !numberplate.value) {
			errorToast('请输入车牌号')
			return
		}
		if (!props.orderLists.driver_mobile && !phone.value) {
			errorToast('请输入手机号码')
			return
		}
		if (!props.orderLists.cart_image && !image.value) {
			errorToast('请上传车辆照片')
			return
		}
		showLoading()
		const payload = {
			id: props.orderID,
			cart_code: numberplate.value ? numberplate.value : props.orderLists.cart_code,
			mobile: phone.value ? phone.value : props.orderLists.driver_mobile,
			cart_image: image.value ? image.value : props.orderLists.cart_image,
			admin_id
		}
		toPublish('control/doFafang', payload, (obj : any) => {
			const { code, msg } = obj;
			grantClose()
			if (code === 1) {
				close()
				successToast(msg)
				setTimeout(() => {
					emit('submit')
				}, 1000)
			} else {
				errorToast(msg)
			}
		});
	}
	// 提交回收
	function recovered() {
		showLoading()
		const payload = {
			id: props.orderID,
			refund_gem: recovers.value ? recovers.value : props.orderLists.gem,
			des: value.value,
			refund_nums_gem: reality.value,
			admin_id
		}
		toPublish('control/doHuishou', payload, (obj : any) => {
			const { code, msg } = obj;
			recoveryClose()
			if (code === 1) {
				close()
				successToast(msg)
				setTimeout(() => {
					emit('submit')
				}, 1000)
			} else {
				errorToast(msg)
			}
		});
	}
	function onChineseInput(e : any) {
		console.log(JSON.stringify(e.detail.value) + '-------')
		recovers.value = e.detail.value
		count()
	}
	function count() {
		const money = recovers.value ? recovers.value : props.orderLists.gem
		if (money > props.orderLists.driver_gem) {
			reality.value = props.orderLists.driver_gem
		} else {
			reality.value = money
		}
	}


	// 修改蓝宝石膨胀状态弹框
	function open() {
		popup.value.open();
	}
	function close() {
		popup.value.close();
	}
	// 回收弹框
	function recoveryOpen() {
		count()
		close()
		recovery.value.open();
	}
	function recoveryClose() {
		recovery.value.close();
	}
	// 发放弹框
	function grantOpen() {
		close()
		grant.value.open();
	}
	function grantClose() {
		grant.value.close();
	}
	defineExpose({
		open,
		close,
	});
</script>

<style scoped lang="less">
	.top {
		margin-top: 20rpx;
	}

	uni-input {
		text-align: right;
	}

	.textarea {
		background-color: #eee;
		border-radius: 5px;
		margin-top: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
		height: 150rpx;
	}

	.but {
		width: 100%;
		justify-content: space-around;
		margin: 60rpx 0px 20rpx;

		view {
			width: 230rpx;
			height: 69rpx;
			border-radius: 5px;
			text-align: center;
			line-height: 69rpx;
		}

		view:nth-of-type(1) {
			color: #468FF5;
			border: 1px solid #468FF5;
			box-sizing: border-box;
		}

		view:nth-of-type(2) {
			background: #468FF5;
			color: #FFF;
		}
	}
</style>
<style>
	.top>>>.textarea {
		width: 100%;
	}

	.top>>>.mk-upload_item.mk-upload_item_column3 {
		flex: 0 calc(38% - var(--mk-upload_item_margin, 15px));
	}
</style>